<template>
    <div class="crud-opts">
        <span class="crud-opts-left" style="width: 500px;">
            <el-button-group>
                <el-button icon="el-icon-refresh"
                           @click="crud.refresh()"></el-button>

                <!--新增-->
                <el-popover placement="bottom" width="100" trigger="click">
                   <el-button icon="el-icon-plus" slot="reference"></el-button>
                    <div>
                      <el-row>
                        <el-button type="text" @click="addSql">SQL式查询</el-button>
                      </el-row>
                      <el-row>
                         <el-button type="text">拖拽式查询</el-button>
                      </el-row>
                    </div>
                </el-popover>

                <!--更多操作-->
                <el-popover placement="bottom" width="100" trigger="click">
                   <el-button icon="el-icon-more" slot="reference"></el-button>
                    <div>
                      <el-row>
                        <el-button type="text">修改</el-button>
                      </el-row>
                      <el-row>
                         <el-button type="text">删除</el-button>
                      </el-row>
                       <el-row>
                           <el-button type="text">详情</el-button>
                       </el-row>
                    </div>
                </el-popover>

                <!--列表字段-->
                <el-popover placement="bottom" width="100" trigger="click">
                    <el-button slot="reference" icon="el-icon-s-grid"></el-button>
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="checkedTableColumns" @change="handleCheckedTableColumnsChange">
                      <el-checkbox v-for="item in tableColumns" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                </el-popover>

                <!--<el-button icon="el-icon-s-grid"></el-button>-->
            </el-button-group>
            <el-button-group>
              <!--查询按钮-->
                <el-button icon="el-icon-search" @click="showQryParams()"
                           v-if="!showQryParamFlag"></el-button>
                <div>
                    <el-input placeholder="请输入内容" v-model="qryParam" style="width: 300px"
                              class="input-with-select" v-if="showQryParamFlag" clearable>
                        <el-select v-model="qryCloum" slot="prepend" placeholder="请选择" style="width: 100px">
                          <el-option label="数据库名" value="1"></el-option>
                          <el-option label="执行方式" value="2"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="hideQryParams()"/>
                    </el-input>
                </div>
            </el-button-group>
        </span>
        <span class="crud-opts-right">
            <el-button-group>
                <el-pagination
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="10"
                        :total="10"
                        layout="prev, pager, next,sizes">
                </el-pagination>
            </el-button-group>
         </span>
    </div>
</template>
<script>
    export default {
        mixins: [],
        props: {

        },
        data() {
            return {
                showQryParamFlag:false,
                qryParam:'',
                qryCloum:''
            }
        },
        created() {

        },
        methods: {
            showQryParams(){
                this.showQryParamFlag = true
            },
            hideQryParams(){
                this.showQryParamFlag = false
            },
        }
    }
</script>

<style>
    .crud-opts {
        padding: 6px 0;
        display: -webkit-flex;
        display: flex;
        align-items: center;
    }
    .crud-opts .crud-opts-right {
        margin-left: auto;
    }
</style>
